@charset 'utf-8';
* {
  margin: 0;
  padding: 0;
}

.small {
  width: 400px;
  height: 400px;
  position: relative;
  border: 4px solid #ddd;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.container {
  width: 400px;
  height: 400px;
  position: relative;
  margin-left: 200px;
  margin-top: 100px;
}
.small img {
  width: 100%;
  height: 100%;
}
.small .wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  /* background: rgba(0, 0, 0, 0.3); */
}

.small .grayBox {
  display: none;
  width: 100px;
  height: 100px;
  background-size: 400px 400px;
  background-position: 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
}

.big {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 700px;
  top: 100px;
  border: 1px solid #f10;
  display: none;
  overflow: hidden;
}
.big img {
  position: absolute;
  width: 1600px;
  height: 1600px;
  left: 50;
  top: 0;
}

.choice-btn {
  position: absolute;
  bottom: -112px;
  width: 100%;
}
.choice-btn img {
  width: 100px;
  height: 100px;
  border: 2px solid #fff;
}
.choice-btn img:hover {
  border-color: #000;
}
